<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app" style="color:red"> 
        <p>hello world zf</p>
        <li>
            {{school.name}}
        </li>
        <li>
            {{school.age}}
        </li>
    </div>
    <script src="dist/umd/vue.js"></script>
    <script>
        // options Api 通过一个选项进行配置
        let vm = new Vue({
            el: '#app',
            data() {
                return { arr: [1,2,3],school:{name:'zf',age:10} }
            },
        });
       
        // 默认弄个数据会递归去用defineProperty进行拦截，性能差 -》 proxy
        // 我们开发功能时很少对数组索引进行操作,为了性能考虑不对数组进行拦截 
        // 拦截可以改变数组的方法进行操作

        // 渲染的操作 1） 默认会先找render方法  2) 默认没有传入render方法会查找template  3) 找当前el指定的元素中的内容来进行渲染
        // ast解析template =》 render函数
    </script>
</body>

</html>